<!DOCTYPE html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="UTF-8">

  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>

  <script type="module" src="../../lib/mixins/template-stamp.js"></script>
</head>
<body>

  <template id="test-template" strip-whitespace>
    <div id="a">a</div>
    <div id="eventHandler" on-click="handleClick"></div>
    <div id="b">b</div>
    <template id="nestedTemplate">
      <div on-click="handleClick"></div>
    </template>
    <template id="preservedTemplate" preserve-content>
      <div on-click="shouldNotBeRemoved"></div>
    </template>
  </template>

  <script type="module">
import { TemplateStamp } from '../../lib/mixins/template-stamp.js';
class TemplateStamper extends TemplateStamp(HTMLElement) {
  connectedCallback() {
    this.handleClick = sinon.spy(event => {
      this.handleClickTarget = event.target;
    });
    let template = document.getElementById('test-template');
    this.dom = this._stampTemplate(template);
    this.attachShadow({mode:'open'}).appendChild(this.dom);
  }
}
customElements.define('template-stamper', TemplateStamper);
</script>

  <script type="module">
import '../../lib/mixins/template-stamp.js';

suite('template-stamp', () => {

  test('id map', () => {
    let el = document.createElement('template-stamper');
    document.body.appendChild(el);
    assert.equal(el.dom.$.a.textContent, 'a');
    assert.equal(el.dom.$.b.textContent, 'b');
    document.body.removeChild(el);
  });

  test('declarative events', () => {
    let el = document.createElement('template-stamper');
    document.body.appendChild(el);
    el.dom.$.eventHandler.click();
    assert.equal(el.handleClick.callCount, 1);
    assert.equal(el.handleClick.firstCall.args[0].type, 'click');
    assert.equal(el.handleClickTarget, el.dom.$.eventHandler);
    document.body.removeChild(el);
  });

  test('cached template content', () => {
    let el = document.createElement('template-stamper');
    document.body.appendChild(el);
    let content = el.constructor._contentForTemplate(el.dom.$.nestedTemplate);
    assert.isTrue(content instanceof DocumentFragment);
    assert.notOk(content.ownerDocument.defaultView);
    assert.equal(content.firstChild.getAttribute('on-click'), null);
    document.body.removeChild(el);
  });

  test('preserved template content', () => {
    let el = document.createElement('template-stamper');
    document.body.appendChild(el);
    let content = el.dom.$.preservedTemplate.content;
    assert.isTrue(content instanceof DocumentFragment);
    assert.equal(content.childNodes[1].getAttribute('on-click'), 'shouldNotBeRemoved');
    document.body.removeChild(el);
  });

});

// Note template parsing API is tested in `property-effects-template.html`,
// combined with adding property effects
</script>

</body>
</html>
